/**
 * 作者:hanbo
 * 日期:2018/12/2610:34
 * 描述:
 */

var map;
var view;
require([
    "dojo/parser",
    "esri/Map",
    "esri/views/MapView",
    "esri/layers/MapImageLayer",
    "esri/layers/GroupLayer",
    "esri/layers/FeatureLayer",
    "esri/geometry/Extent"
    , "myModule/UIControl"
    , "esri/tasks/FindTask"
    , "dojo/domReady!"
], function (parser, Map, MapView, MapImageLayer, GroupLayer, FeatureLayer, Extent
    , UIControl
) {
    parser.parse();
    map = new Map({
        basemap: "osm"
        // layers: []
    });
    var layer = new MapImageLayer({
        url: "http://localhost:6080/arcgis/rest/services/现有地图/MapServer",
        title: "现有地图"
    });
    map.add(layer);


    var popupTemplate = {
        title: "陵墓详情",
        content: [
            {
                type: "fields",
                fieldInfos: [{
                    fieldName: "Name",
                    label: "名称",
                    visible: true
                }, {
                    fieldName: "Adress",
                    label: "地址",
                    visible: true
                }, {
                    fieldName: "Category",
                    label: "类型",
                    visible: true
                }, {
                    fieldName: "shuxing",
                    label: "陵墓类型",
                    visible: true
                }
                ]
            },
            {
                type: "media",
                mediaInfos: [
                    {
                        title: "景点照片",
                        type: "image",  //图片
                        value: {
                            sourceURL: "img/123.jpg"
                        }
                    }
                ]
            }
        ]
    };

    var layer1 = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/陵墓数据测试/FeatureServer/0",
        title: "唐代皇帝陵墓",
        outFields: ["*"],
        popupTemplate: popupTemplate,
        renderer: {
            type: "simple",
            symbol: {
                type: "picture-marker",
                url: "img/t1.png",
                width: "32px",
                height: "32px"
            }
        }
    });
    var layer2 = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/陵墓数据测试/FeatureServer/1",
        title: "唐代大臣陵墓",
        outFields: ["*"],
        popupTemplate: popupTemplate,
        renderer: {
            type: "simple",
            symbol: {
                type: "picture-marker",
                url: "img/t2.png",
                width: "32px",
                height: "32px"
            }
        }
    });
    var layer3 = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/陵墓数据测试/FeatureServer/2",
        title: "汉代皇帝陵墓",
        outFields: ["*"],
        popupTemplate: popupTemplate,
        renderer: {
            type: "simple",
            symbol: {
                type: "picture-marker",
                url: "img/t3.png",
                width: "32px",
                height: "32px"
            }
        }
    });
    var layer4 = new FeatureLayer({
        url: "http://localhost:6080/arcgis/rest/services/陵墓数据测试/FeatureServer/3",
        title: "汉代大臣陵墓",
        outFields: ["*"],
        popupTemplate: popupTemplate,
        renderer: {
            type: "simple",
            symbol: {
                type: "picture-marker",
                url: "img/t4.png",
                width: "32px",
                height: "32px"
            }
        }

    });
    var groupLayer = new GroupLayer({
        title: "陵墓详情"
    });
    map.add(layer);
    groupLayer.addMany([layer1, layer2, layer3, layer4]);
    map.add(groupLayer);
    //设置地图范围
    view = new MapView({
        container: "map",
        map: map,
        extent: new Extent({
            xmax: 109.908090,
            ymax: 35.174175,
            xmin: 107.739930,
            ymin: 34.173820,
            spatialReference: {
                wkid: 4326
            }
        })
    });


    view.when(function () {
        var uiControl = new UIControl(view);
        uiControl.setScaleBar(true);
    });
    /**
     * 点击监听
     */
// view.on("click", function (event) {
//     console.log(event.mapPoint);
// });
});

function setBaseMap(node, type) {
    $("#baseMapDiv li").removeClass("choose");
    $(node).addClass("choose");
    switch (type) {
        case "1":
            setLineMap("http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}");
            break;
        case "2":
            setLineMap(" http://www.google.cn/maps/vt?lyrs=y@189&gl=cn&x={x}&y={y}&z={z}");
            break;
        case "3":
            setLineMap(" http://map.geoq.cn/ArcGIS/rest/services/ChinaOnlineStreetPurplishBlue/MapServer/tile/{z}/{y}/{x}");
            break;
        case "4":
            setLineMap(" http://www.google.cn/maps/vt?lyrs=p@189&gl=cn&x={x}&y={y}&z={z}");
            break;
        case "5":
            setLineMap("http://webst01.is.autonavi.com/appmaptile?lang=zh_cn&size=1&scale=1&style=8&x={x}&y={y}&z={z}");
            break;
        default:
            map.basemap = type;
            break
    }
}

function setLineMap(url) {
    require(["esri/Basemap", "esri/layers/WebTileLayer", "esri/layers/support/TileInfo", "myModule/GoogleMapLayer", "dojo/domReady!"], function (Basemap, WebTileLayer, TileInfo, GoogleMapLayer) {


        var basemap = new Basemap({
            baseLayers: [
                new GoogleMapLayer({urlTemplate: url})
            ]
            // ,
            //     referenceLayers: [
            //         new WebTileLayer()
            //     ]
        });
        map.basemap = basemap;
    })
}